<script setup>
import router from "@/router";
import {onMounted, reactive, ref} from "vue";
import PageComponent from "@/components/index/PageComponent.vue";
import {$ajax, apiUrl} from "@/utils/ajax";
import {ElMessageBox} from "element-plus";

const data = reactive([])
const loading = ref(false)
const page = ref(1)
const pageSize = ref(30)
const total = ref(0)
const handlData = (p) => {
  page.value = p
  loading.value = true
  $ajax.get(`${apiUrl}admin/pack_bag/page`, {
    params: {
      page: page.value,
      pageSize: pageSize.value
    }
  }).then(({data: {result: {lst, total: tol}}}) => {
    data.splice(0, data.length, ...lst)
    total.value = tol
    loading.value = false
  }).catch(() => loading.value = false)
}
onMounted(() => {
  handlData(1)
})
const deleteData = row=>{
  ElMessageBox.confirm(`确认删除礼包【${row.name}】？`, "删除").then(() => {
    loading.value = true
    $ajax.delete(`${apiUrl}admin/pack_bag/delete`, {params: {id: row.id}}).then(() => {
      handlData(page.value)
    }).catch(()=>loading.value=false)
  })
}
</script>

<template>
  <div class="breadcrumb">
    <el-breadcrumb>
      <el-breadcrumb-item :to="{name:'home'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>礼包管理</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="search">
    <el-button type="primary" @click="router.push({name:'packEdit'})">新增</el-button>
  </div>
  <el-table :data="data" v-loading="loading" height="75vh" border stripe size="small" class="table-data">
    <el-table-column prop="id" label="ID" width="80"/>
    <el-table-column prop="image" label="礼包图" width="100">
      <template #default="{row}">
        <el-image :src="row.image" v-if="row.image"/>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="礼包名称"/>
    <el-table-column prop="price" label="礼包价格" width="120"/>
    <el-table-column prop="state" label="礼包状态" width="80" align="center">
      <template #default="{row}">
        <el-text size="small" v-if="row.state===1" type="success">上架</el-text>
        <el-text size="small" v-else type="danger">下架</el-text>
      </template>
    </el-table-column>
    <el-table-column prop="product_attr_count" label="规格数量" width="80"/>
    <el-table-column prop="create_time" label="创建时间"/>
    <el-table-column label="操作">
      <template #default="{row}">
        <el-button-group size="small">
          <el-button type="primary" link @click="router.push({name:'packEdit',params:{id:row.id}})" icon="el-icon-edit">
            编辑
          </el-button>
          <el-button type="primary" link @click="router.push({name:'packProduct',params:{id:row.id}})" icon="el-icon-edit">
            筛选产品
          </el-button>
          <el-button type="primary" link @click="deleteData(row)" icon="el-icon-edit">
            删除
          </el-button>
        </el-button-group>
      </template>

    </el-table-column>
  </el-table>
  <page-component :size="pageSize" :page="page" :total="total" @get-data="handlData"/>
</template>

<style scoped lang="scss">

</style>
